import React from 'react';
import { Breadcrumb, Button, Table, Input, Pagination, message, Row, Col, DatePicker, Icon, Form, Modal } from 'antd';
import $ from 'jquery';
import Config from '../../common/config';
const { RangePicker } = DatePicker;
const config = new Config();
import moment from 'moment';
const FormItem = Form.Item;
const now = () => {
    return moment().format('YYYY-MM-DD HH:mm:ss')
};

class UserManage1 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            pageindex: 1,//当前页码
            activityinfo: {},//活动信息
            isEidt: false,//是否是编辑状态
            activityJoinInInfo: [],//活动参与情况
            activityJoinInInfoCount: 0,//活动参与情况条数
            handleSingleCount: false,//打卡次数降序
            handleTotalCount: false,//连续打卡次数降序
        }
    }
    componentWillMount() {

    }
    componentDidMount() {
        this.getActivityInfo(this.props.location.state);
        this.getJoinInInfo(1);
    }
    //获取信息
    getActivityInfo(id) {
        $.ajax({
            url: `${config.wechat}/activitymanage/findOne`,
            type: "get",
            async: true,
            headers: {
                'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
            },
            data: { uuid: id },
            success: data => {
                console.log(data);
                if (data.code === 200) {
                    //查找该新增信息
                    this.setState({
                        activityinfo: data.data
                    })
                }
            }
        });
    }
    //获取参与情况信息
    getJoinInInfo(pageindex, type, state) {
        $.ajax({
            url: `${config.wechat}/activitymanage/activity`,
            type: "post",
            async: true,
            headers: {
                'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
            },
            data: {
                uuid: this.props.location.state,
                pageindex,
                type,
                state
            },
            success: data => {
                console.log(data);
                if (data.code === 200) {
                    //查找该新增信息
                    this.setState({
                        activityJoinInInfo: data.data.rows,
                        activityJoinInInfoCount: data.data.count,
                    }, () => {
                        console.log(this.state.activityJoinInInfo);
                    })
                } else {
                    message.error('获取活动参与信息失败，请重新操作！', 2)
                }
            }
        });
    }
    //分页
    changePage(pageindex) {
        console.log(pageindex)
        this.setState({
            pageindex
        });
        this.getJoinInInfo(pageindex)
    }
    //编辑
    handleEdit() {
        const { activityinfo } = this.state;
        this.setState({
            isEidt: true,
        }, () => {
            this.props.form.setFieldsValue({
                activity_star: activityinfo.activity_star ? moment(activityinfo.activity_star) : undefined,
                activity_end: activityinfo.activity_end ? moment(activityinfo.activity_end) : undefined,
                activity_name: activityinfo.activity_name,
            });
        })
    }
    //保存
    handleSave() {
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log(values);
                let data = {
                    uuid: this.state.activityinfo.uuid,
                    editordate: JSON.stringify({
                        activity_star: values.activity_star.format('YYYY-MM-DD'),
                        activity_end: values.activity_end.format('YYYY-MM-DD'),
                        activity_name: values.activity_name,
                    }),
                };
                $.ajax({
                    url: `${config.wechat}/activitymanage/editoractivity`,
                    type: "post",
                    async: true,
                    headers: {
                        'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
                    },
                    data: data,
                    success: data => {
                        console.log(data);
                        if (data.code === 200) {
                            this.getActivityInfo(this.props.location.state);
                            message.success(`修改成功!`, 2);
                        } else {
                            Modal.warning({
                                title: '修改失败',
                                content: `${data.mes}请返回重新操作`,
                            });
                        }
                    }
                });
            } else {
                message.error(`请按规定填写信息，再提交`, 2);
            }
        })
        this.setState({
            isEidt: false,
        })
    }
    //打卡次数
    handleSingleCount() {
        let value = this.state.handleSingleCount;
        this.setState({
            handleSingleCount: !value,
        }, () => {
            this.getJoinInInfo(this.state.pageindex, 1, !value);
        });

    }
    //连续打卡次数
    handleTotalCount() {
        let value = this.state.handleTotalCount;
        this.setState({
            handleTotalCount: !value,
        }, () => {
            this.getJoinInInfo(this.state.pageindex, 2, !value);
        });
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        const { handleSingleCount, handleTotalCount } = this.state;
        const columns = [
            {
                title: 'ID',
                dataIndex: 'id',
                width: 100,
            },
            {
                title: '昵称',
                dataIndex: 'userinfo.nickName',
                width: 100,
            }, {
                title: <span style={{ cursor: 'pointer' }} onClick={this.handleSingleCount.bind(this)}>打卡次数<Icon type={handleSingleCount ? 'arrow-up' : 'arrow-down'} /></span>,
                dataIndex: 'totalsigncount',
                width: 100,
            }, {
                title: <span style={{ cursor: 'pointer' }} onClick={this.handleTotalCount.bind(this)}>连续打卡次数<Icon type={handleTotalCount ? 'arrow-up' : 'arrow-down'} /></span>,
                dataIndex: 'continuitysigncount',
                width: 100
            },
        ];
        const { activityinfo, isEidt, activityJoinInInfo, activityJoinInInfoCount } = this.state;
        return (
            <div className='goods-label clearfix activity-manage-detail' >
                <Row style={{ marginBottom: '20px' }}>
                    <Col span={2} style={{ fontWeight: 'bold', fontSize: '15px' }}>活动详情</Col>
                    <Col span={2} offset={20}>{isEidt ? <Button type="primary" onClick={this.handleSave.bind(this)}>保存</Button> : <Button type="primary" onClick={this.handleEdit.bind(this)}>编辑</Button>}</Col>
                </Row>
                <Form>
                    <Row style={{ borderBottom: '1px solid #ddd', paddingBottom: '20px' }}>
                        <Col span={2} className="font-bold">活动ID：</Col>
                        <Col span={6}>{activityinfo.id}</Col>
                        <Col span={2} offset={8} className="font-bold">创建时间：</Col>
                        <Col span={6}>{moment(activityinfo.createdate).format('YYYY-MM-DD')}</Col>
                    </Row>
                    <Row style={{ paddingTop: '10px' }}>
                        <Col span={2} className="font-bold">活动名：</Col>
                        <Col span={22}>{isEidt ?
                            <FormItem>
                                {getFieldDecorator('activity_name', {
                                    rules: [{ required: true, message: '请输入活动名' }],
                                })(
                                    <Input style={{ width: '200px' }} />
                                )}
                            </FormItem>
                            : activityinfo.activity_name}</Col>
                    </Row>
                    <Row style={{ borderBottom: '1px solid #ddd', paddingBottom: '40px', paddingTop: '20px' }}>
                        <Col span={2} className="font-bold">开始时间：</Col>
                        <Col span={6}>{isEidt ?
                            <FormItem>
                                {getFieldDecorator('activity_star', {
                                    rules: [{ required: true, message: '请选择开始时间' }],
                                })(
                                    <DatePicker
                                        style={{ width: '200px' }}
                                        showTime
                                        format="YYYY-MM-DD"
                                        placeholder="开始时间:"
                                    />
                                )}
                            </FormItem>
                            : moment(activityinfo.activity_star).format('YYYY-MM-DD')}</Col>
                        <Col span={2} className="font-bold">结束时间：</Col>
                        <Col span={6}>{isEidt ?
                            <FormItem>
                                {getFieldDecorator('activity_end', {
                                    rules: [{ required: true, message: '请选择结束时间' }],
                                })(
                                    <DatePicker
                                        style={{ width: '200px' }}
                                        showTime
                                        format="YYYY-MM-DD"
                                        placeholder="结束时间:"
                                    />
                                )}
                            </FormItem>
                            : moment(activityinfo.activity_end).format('YYYY-MM-DD')}</Col>
                        <Col span={2} className="font-bold">状态：</Col>
                        <Col span={6}>{activityinfo.activity_state === 0 ? '待开始' : activityinfo.activity_state === 1 ? '进行中' : activityinfo.activity_state === 2 ? '结束' : ''}</Col>
                    </Row>
                </Form>
                <p style={{ marginTop: '20px', fontWeight: 'bold', fontSize: '15px' }}>参与情况</p>
                <div className="clearfix dataManage">
                    <div className='allgoods-table clearfix' style={{ marginTop: '20px' }}>
                        <Table
                            rowKey="id"
                            columns={columns}
                            dataSource={activityJoinInInfo}
                            pagination={false}
                            bordered
                        />
                    </div>
                </div>
                <div className='goods-label-let'>
                    <div className="floor-ppagi">
                        {
                            this.state.activityJoinInInfoCount === 0 ?
                                <p className="floor-ppagip">
                                    共{this.state.activityJoinInInfoCount}条记录
                                </p> :
                                <p className="floor-ppagip">
                                    当前显示
                                    {20 * (this.state.pageindex - 1) + 1}—
                                    {20 * this.state.pageindex < this.state.activityJoinInInfoCount ? 20 * this.state.pageindex : this.state.activityJoinInInfoCount}条记录，
                                    共{this.state.activityJoinInInfoCount}条记录
                                </p>
                        }
                        <Pagination showQuickJumper current={this.state.pageindex} total={this.state.activityJoinInInfoCount || 1} defaultPageSize={20} onChange={this.changePage.bind(this)} />
                    </div>
                </div>
            </div>
        )
    }
}
const UserManage = Form.create()(UserManage1);
export default UserManage;